<template>
  <el-card class="recharge-history-card">
    <div class="table-header">
      <div class="label">最近一次充值</div>
      <div class="value">{{ rechargeAmount }}￥</div>
    </div>

    <div class="table-body">
      <el-table
        :data="rechargeRecords"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="createTime" label="日期" style=" width:50%" />
        <el-table-column prop="rechargeAmount" label="金额" style=" width:50%"  />
      </el-table>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { ElCard, ElTable, ElTableColumn } from 'element-plus';

interface RechargeRecord {
  date: string;
  amount: number;
  status: string;
}

interface Member {
  rechargeAmount: string;
  rechargeHistory: RechargeRecord[];
}

const props = defineProps({
  member: {
    type: Object as PropType<Member>,
    required: true
  }
});

const rechargeAmount = computed(() => {
  // 检查 rechargeAmount 是否为字符串类型
  if (typeof props.member.rechargeAmount === 'string') {
    return props.member.rechargeAmount.replace('¥', '');
  }
  // 如果不是字符串类型，返回空字符串或者原始值，这里返回原始值
  return props.member.rechargeAmount;
});

const rechargeRecords = computed(() => {
  return props.member.rechargeHistory;
});
</script>

<style scoped>
.recharge-history-card {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  line-height: 1.6;
  color: #333;
}

.table-body .el-table {
  min-height: 150px;
}
</style>



